<template>
	<div class="body">
		 <!-- <el-button @click="$router.go(0)" type="info" icon="el-icon-refresh-right"></el-button> -->
		<!-- <el-button type="success" icon="el-icon-plus"  @click="handleAdd">添加</el-button>
		<el-button type="primary" icon="el-icon-edit"  @click="handleUpdate">编辑</el-button> -->
		<!-- <el-button type="danger" icon="el-icon-delete">删除</el-button> -->
		<!-- <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->
		   <el-row class="mb8">
            <el-col :span="19">
               <el-button @click="shuaxin" type="info" icon="el-icon-refresh-right"></el-button>
    <el-button type="primary" >添加</el-button>
            </el-col>
            <el-col :span="5" class="seach">
                <el-input v-model="jigouName" placeholder="请输入文件名称"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="seach"></el-button>
            </el-col>
        </el-row>
		<el-table  ref="multipleTable" :data="tableData" tooltip-effect="dark" class="table xinde"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column align="center" width="55" label="ID" >
				<template  slot-scope="scope">{{ scope.row.date }}</template>
			</el-table-column>
			<el-table-column align="center" width="85" label="父级ID">
				<template slot-scope="scope">{{ scope.row.date }}</template>
			</el-table-column>
			<el-table-column align="center"       :show-overflow-tooltip="true"
              width="120" prop="name" label="员工姓名" >
			</el-table-column>
			<el-table-column align="center"       :show-overflow-tooltip="true"
              width="120" prop="address" label="账号">
			</el-table-column>
			<!-- <el-table-column align="center"       :show-overflow-tooltip="true"
              width="120" label="密码">
				<template slot-scope="scope">{{ scope.row.date }}</template>
			</el-table-column> -->
			<el-table-column align="center"       :show-overflow-tooltip="true"
              width="120" prop="name" label="部门权限">
			</el-table-column>
			<el-table-column align="center" :show-overflow-tooltip="true"
              width="120" prop="address" label="上次登录时间">
				<template slot-scope="scope">{{ scope.row.time }}</template>
			</el-table-column>
			<el-table-column align="center" :show-overflow-tooltip="true"
              width="120" prop="name" label="创建时间">
				<template slot-scope="scope">{{ scope.row.time }}</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleUpdate">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 新增或修改 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="序号">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="项目编号">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="项目名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="担保机构名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">确定</el-button>
					<el-button @click="cancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>

		<div class="block">
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage4" :page-sizes="[7]" :page-size="7"
				layout="total, sizes, prev, pager, next, jumper" :total="45">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 表单参数
				form: {
					name: ''
				},
				// 表单校验
				rules: {},
				currentPage1: 5,
				currentPage2: 5,
				currentPage3: 5,
				currentPage4: 4,
				tableData: [{
					date: '1',
					name: '贾新宽',
					address: '15090545888',
					time:"",
				}],
				multipleSelection: []
			}
		},

		methods: {
			shuaxin(){

			},
			// 表单重置
			reset() {
				this.form = {
					name: ''
				};
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			//新增按钮操作
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加档案架";
			},
			//修改
			handleUpdate() {
				this.reset();
				this.open = true;
				this.title = "修改档案架";
			},
			//提交按钮
			onSubmit() {
				alert('submit!');
				this.open = false;
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style scoped>
	.body {
		
	}

	.table {
		width: 100%;
		margin-top: 2vh;
	}

	.block {
		position: fixed;
		bottom: 20px;
		right: 20px;
	}
</style>
